import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 创建一个新的场景对象
const scene = new THREE.Scene();
// 创建一个网格模型
const geometry = new THREE.BoxGeometry(1, 1, 1);    // 创建一个立方体几何体
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });      // 创建一个材质对象
const mesh = new THREE.Mesh(geometry, material);        // 创建一个网格模型对象
mesh.position.set(1, 1, 1,)       // 设置网格模型对象的位置
scene.add(mesh);            // 将网格模型对象添加到场景中

// 创建辅助观察坐标系
const asesHelper = new THREE.AxesHelper(200);
scene.add(asesHelper);

// 创建一个透视相机，参数分别为视野角度、宽高比、近平面和远平面
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
//相机在Three.js三维坐标系中的位置
// 根据需要设置相机位置具体值
camera.position.set(5, 5, 5);
// 设置相机方向(指向的场景对象)                            
camera.lookAt(mesh.position);
// 默认是 0 1 0
camera.up.x = 0;
camera.up.y = 0;
camera.up.z = 1; 

// 创建一个WebGL渲染器
const renderer = new THREE.WebGLRenderer({
    antialias: true,        // 开启抗锯齿
});
// 设置渲染器的大小，使其充满整个窗口
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器的DOM元素添加到文档的body中
document.body.appendChild(renderer.domElement);
// 获取屏幕对应的设备像素比.devicePixelRatio告诉threejs,以免渲染模糊问题
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setClearColor('green', 1); //设置背景颜色
const controls = new OrbitControls(camera, renderer.domElement)                                                


/**
 * 动画函数
 * 该函数通过不断地请求下一帧来实现动画效果
 * 它在每一帧中调用渲染器来重新渲染场景和相机
 */
function animate() {
    // 跟随Z轴旋转
    mesh.rotation.z += 0.01;
    controls.update();
    // 请求下一帧动画
    requestAnimationFrame(animate);
    // 使用当前场景和相机进行渲染
    renderer.render(scene, camera);
}

// 调用animate函数开始动画
animate();

